<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      房间管理
    </div>
    <div style="margin-left: 45%">
      <el-button type="primary" @click="addButton"
                 style="margin-left: 40px">新增
      </el-button>
      <el-input v-model="roomNumber" placeholder="房间号"
                style="width: 200px;margin-left: 40px" clearable/>
      <el-select v-model="roomTypeName" placeholder="房间类型"
                 style="width: 200px;margin-left: 40px" clearable>
        <el-option
          v-for="item in roomTypeList"
          :key="item.roomTypeId"
          :label="item.roomTypeName+'-'+item.roomPrice"
          :value="item.roomTypeName"
        />
      </el-select>


      <el-button type="primary" @click="selectAll"
                 style="margin-left: 40px">查询
      </el-button>
      <el-button style="margin-left: 40px" @click="check">重置</el-button>
    </div>
    <div style="margin-top: 20px">
      <el-table :data="roomList" height="659px" border style="width: 100%">
        <el-table-column align="center" fixed prop="roomId" sortable label="房间ID"/>
        <el-table-column align="center" fixed prop="roomNumber" sortable label="房间号"/>
        <el-table-column align="center" fixed prop="roomTypeName" sortable label="房间类型"/>
        <el-table-column align="center" fixed prop="roomPrice" sortable label="房间价格"/>
        <el-table-column align="center" fixed prop="remark" sortable label="备注"/>
        <el-table-column align="center" fixed="right" label="操作">
          <template v-slot="scope">
            <!--传入的scope.row参数为当前行的数据-->
            <el-button @click="updateButton(scope.row)" type="text" size="small">修改</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button @click="deleteButton(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <!--新增弹窗-->
      <el-dialog title="新增" width="40%" :visible.sync="addButtonController" @close="close('ruleForm')">
        <div style="margin: 10px">
          <el-form label-width="20%" :rules="Roles" :model="addList" ref="ruleForm">
            <el-form-item label="房间号" prop="roomNumber">
              <el-input v-model="addList.roomNumber" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入房间号"/>
            </el-form-item>
            <el-form-item label="房间类型" prop="roomTypeName">
              <el-select v-model="addList.roomTypeId" placeholder="请选择房间类型"
                         style="width: 80%" clearable>
                <el-option
                  v-for="item in roomTypeList"
                  :key="item.roomTypeId"
                  :label="item.roomTypeName+'-'+item.roomPrice"
                  :value="item.roomTypeId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="addList.remark" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入备注"/>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add('ruleForm')">确定</el-button>
        <el-button @click="close('ruleForm')">取消</el-button>
      </span>
      </el-dialog>

      <!--修改弹窗-->
      <el-dialog title="修改" width="40%" :visible.sync="updateController" @close="close('ruleForm')">
        <div style="margin: 10px">
          <el-form label-width="20%" :rules="Roles" :model="updateList" ref="ruleForm">
            <el-form-item label="房间名称" prop="roomNumber">
              <el-input v-model="updateList.roomNumber" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入房间号"/>
            </el-form-item>
            <el-form-item label="房间类型" prop="roomTypeId">
              <el-select v-model="updateList.roomTypeId" placeholder="请选择房间类型"
                         style="width: 80%" clearable>
                <el-option
                  v-for="item in roomTypeList"
                  :key="item.roomTypeId"
                  :label="item.roomTypeName+'-'+item.roomPrice"
                  :value="item.roomTypeId"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="updateList.remark" maxlength="20" show-word-limit style="width: 80%"
                        clearable placeholder="请输入备注"/>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="update('ruleForm')">确定</el-button>
        <el-button @click="close('ruleForm')">取消</el-button>
      </span>
      </el-dialog>

      <!--删除弹窗-->
      <el-dialog title="删除" width="40%" :visible.sync="deleteController">
        <div style="margin: 10px">
          <span>请确认是否删除该房间信息</span>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteRoom">确定</el-button>
        <el-button @click="deleteController = false">取消</el-button>
      </span>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { selectAllRoomType } from '@/api/roomType'
import { selectAllRoom, deleteByRoom, insertByRoom, updateByRoom } from '@/api/room'

export default {
  name: 'room',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data() {
    return {
      roomTypeList: [],
      roomTypeName: '',
      roomNumber: '',
      roomList: [],
      addButtonController: false,
      addList: {
        roomNumber: '',
        roomTypeId: '',
        remark: ''
      },
      Roles: {
        roomNumber: [
          { required: true, trigger: 'blur', message: '房间号不能为空' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        roomTypeId: [
          { required: true, trigger: 'blur', message: '房间类型不能为空' }
        ]
      },
      updateController: false,
      updateList: {
        roomTableId: '',
        roomId: '',
        roomNumber: '',
        roomTypeId: '',
        remark: ''
      },
      deleteController: false,
      deleteRoomId: ''
    }
  },
  mounted() {
    this.selectAll()
  },
  methods: {
    selectAll() {
      selectAllRoomType({}).then(
        response => {
          this.roomTypeList = response.data
        }
      )
      selectAllRoom({ roomTypeName: this.roomTypeName, roomNumber: this.roomNumber }).then(
        response => {
          this.roomList = response.data
        }
      )
    },
    check() {
      this.roomTypeName = ''
      this.roomNumber = ''
      this.selectAll()
    },
    addButton() {
      this.addList = {
        roomNumber: '',
        roomTypeId: '',
        remark: ''
      }
      this.addButtonController = true
    },
    add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          insertByRoom({
            roomNumber: this.addList.roomNumber,
            roomTypeId: this.addList.roomTypeId,
            remark: this.addList.remark
          }).then(
            async response => {
              this.selectAll()
              this.addButtonController = false
            }
          )
        } else {
          return false
        }
      })
    },
    close(formName) {
      this.$refs[formName].resetFields()
      this.addButtonController = false
      this.updateController = false
    },
    updateButton(row) {
      this.updateList = {
        roomTableId: row.roomTableId,
        roomId: row.roomId,
        roomNumber: row.roomNumber,
        roomTypeId: row.roomTypeId,
        remark: row.remark
      }
      this.updateController = true
    },
    update(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateByRoom({
            roomTableId: this.updateList.roomTableId,
            roomId: this.updateList.roomId,
            roomNumber: this.updateList.roomNumber,
            roomTypeId: this.updateList.roomTypeId,
            roomPrice: this.updateList.roomPrice,
            remark: this.updateList.remark
          }).then(
            async response => {
              this.selectAll()
              this.updateController = false
            }
          )
        } else {
          return false
        }
      })
    },
    deleteButton(row) {
      this.deleteRoomId = row.roomId
      this.deleteController = true
    },
    deleteRoom() {
      deleteByRoom({
        roomId: this.deleteRoomId
      }).then(
        async response => {
          this.selectAll()
          this.deleteController = false
        }
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
